<template>
  <router-layout>
    <div class="container">
      <div class="title">
        <div class="title-left" @click="back">
          <span class="arrow-title"></span>
          <span style="  font-family: PingFangSC-Regular;font-size: 1.3rem;color: #fff;">返回</span>
        </div>
        <div>
          <p>{{data.activeTitle}}</p>
        </div>
        <div class="title-right" @click="openLink1()">
          <img src="https://gw.alicdn.com/tfs/TB1ftFyOcfpK1RjSZFOXXa6nFXa-200-200.png" alt>
        </div>
      </div>
      <div style="padding-top:4rem;">
        <div class="lucky-wheel">
          <!-- <div class="lucky-title"></div> -->
          <div class="wheel-main">
            <div class="wheel-pointer-box">
              <div
                class="wheel-pointer"
                @click="rotate_handle()"
                :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"
              ></div>
            </div>
            <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
              <div class="prize-list">
                <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                  <div class="prize-pic">
                    <img :src="item.icon">
                  </div>
                  <div class="prize-count" v-if="item.count">{{item.count}}</div>
                  <div class="prize-type">{{item.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="main-bg"></div>
          <!-- <div class="bg-p"></div> -->
          <div class="tip">
            <div class="tip-content">
              已有
              <p class="num">{{data.takenum}}</p>人参与
            </div>
            <div class="tip-content1">
              您今天还有
              <p class="num">{{data.mytakenum}}</p>次机会
            </div>
          </div>
          <div class="tip">
            <div class="tip-record">
              <img src="https://gw.alicdn.com/tfs/TB1OVxpOgHqK1RjSZFPXXcwapXa-200-200.png" alt>
              <p>我的奖品</p>
              <img src="https://gw.alicdn.com/tfs/TB1OVxpOgHqK1RjSZFPXXcwapXa-200-200.png" alt>
            </div>
            <div class="tip-record1" @click="openLink()">
              <p>暂无中奖纪录</p>
            </div>
          </div>
          <div class="tip">
            <div class="tip-record">
              <img src="https://gw.alicdn.com/tfs/TB1OVxpOgHqK1RjSZFPXXcwapXa-200-200.png" alt>
              <p>活动说明</p>
              <img src="https://gw.alicdn.com/tfs/TB1OVxpOgHqK1RjSZFPXXcwapXa-200-200.png" alt>
            </div>
            <div class="tip-explain">
              <p class="explain-title">{{data.activeTitle}}</p>
              <p class="explain-list">{{data.activeDesc}}</p>
            </div>
            <div class="tip-explain">
              <p class="explain-title">活动时间</p>
              <p
                class="explain-list"
              >{{data.activeStarttime | formate_date}} 至 {{data.activeEndtime | formate_date}}</p>
            </div>
          </div>
        </div>
        <div class="toast" v-show="toast_control">
          <div class="toast-container">
            <img :src="toast_pictrue" class="toast-picture">
            <!-- <div class="close" @click="close_toast()"></div> -->
            <div class="toast-title">{{toast_title}}</div>
            <div style="display: flex;justify-content: center; margin:0rem 4rem;">
              <div class="toast-btn">
                <div class="toast-cancel" v-if="hasPrize==true" @click="close_toast">领取奖品</div>
              </div>
              <div class="toast-btn1">
                <div class="toast-cancel" @click="close_toast">继续抽奖</div>
              </div>
            </div>
          </div>
        </div>
        <div class="toast-mask" v-show="toast_control"></div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { drawMob_findById } from "@/api/drawMob";
import moment from "moment";

export default {
  name: "Trunplate",
  data() {
    return {
      data: {},
      easejoy_bean: 0, //金豆
      lottery_ticket: 0, //抽奖次数
      prize_list: [], //奖品列表
      toast_control: false, //抽奖结果弹出框控制器
      hasPrize: false, //是否中奖
      start_rotating_degree: 0, //初始旋转角度
      rotate_angle: 0, //将要旋转的角度
      start_rotating_degree_pointer: 0, //指针初始旋转角度
      rotate_angle_pointer: 0, //指针将要旋转的度数
      rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
      rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      click_flag: true, //是否可以旋转抽奖
      i: 0 //测试使用
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY/MM/DD");
    }
  },
  computed: {
    toast_title() {
      return this.hasPrize
        ? "恭喜您，获得" +
            this.prize_list[this.i].count +
            " " +
            this.prize_list[this.i].name
        : "未中奖";
    },
    toast_pictrue() {
      return this.hasPrize
        ? require("../../../static/img/choujiang/congratulation.png")
        : require("../../../static/img/choujiang/sorry.png");
    }
  },
  methods: {
    openLink1() {
      this.$router.push("/LotteryMe");
    },
    openLink() {
      this.$router.push("/LotteryDetail");
    },
    back() {},
    //此方法为处理奖品数据
    init_prize_list(list) {},
    rotate_handle() {
      this.rotating();
      this.i = this.i + 2;
    },
    rotating(index) {
      if (!this.click_flag) return;
      var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
      var during_time = 5; // 默认为1s
      var random = Math.floor(Math.random() * 7);
      var result_index = index || random; // 最终要旋转到哪一块，对应prize_list的下标
      var result_angle = [
        337.5,
        292.5,
        247.5,
        202.5,
        157.5,
        112.5,
        67.5,
        100.5
      ]; //最终会旋转到下标的位置所需要的度数
      var rand_circle = 6; // 附加多转几圈，2-3
      this.click_flag = false; // 旋转结束前，不允许再次触发
      if (type == 0) {
        // 转动盘子
        var rotate_angle =
          this.start_rotating_degree +
          rand_circle * 341 +
          result_angle[result_index] -
          (this.start_rotating_degree % 360);
        this.start_rotating_degree = rotate_angle;
        this.rotate_angle = "rotate(" + rotate_angle + "deg)";
        // // //转动指针
        // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
        // this.start_rotating_degree_pointer =360*rand_circle;
        var that = this;
        // 旋转结束后，允许再次触发
        setTimeout(function() {
          that.click_flag = true;
          that.game_over(this.i);
        }, during_time * 1000 + 1500); // 延时，保证转盘转完
      } else {
        //
      }
    },
    game_over() {
      this.toast_control = true;
      this.hasPrize = this.prize_list[this.i].isPrize;
    },
    //关闭弹窗
    close_toast() {
      this.toast_control = false;
    },
    async initList() {
      let parms = {
        company_id: 1,
        user_id: 1,
        draw_id: this.$route.query.drawId
      };
      let res = await drawMob_findById(parms);
      if (res.data.status == 100) {
        this.data = res.data.data;
        this.prize_list = res.data.data.drawList.map(item => {
          return {
            icon: item.item_path,
            count: 10,
            name: item.item_name,
            isPrize: 1
          };
        });
      }
    }
  },
  created() {
    this.init_prize_list();
    this.initList();
  }
};
</script>
<style lang="scss"  scoped>
@import "Trunplate";
</style>

